﻿@namespace FluentCMS.Web.UI
@rendermode RenderMode.InteractiveServer

<div class="f-toolbar">
    <div class="f-toolbar-container">
        <div class="f-toolbar-start">
            <div class="f-toolbar-spacer"></div>
            <a data-enhance-nav="disabled" href="/admin">
                <img src="/_content/FluentCMS.Web.UI/images/logo.svg" />
            </a>
            <a data-enhance-nav="disabled" href="/admin" class="f-toolbar-button f-toolbar-button-link">
                <svg width="11" height="12" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M8.18182 18C3.63518 16.9895 0 12.6998 0 8.18182V3.27273L8.18182 0L16.3636 3.27273V8.18182C16.3636 12.7015 12.7285 16.9895 8.18182 18ZM1.63636 4.09091V8.18182C1.68312 10.0736 2.34848 11.8979 3.5306 13.3755C4.71272 14.8532 6.34648 15.9028 8.18182 16.3636C10.0172 15.9028 11.6509 14.8532 12.833 13.3755C14.0152 11.8979 14.6805 10.0736 14.7273 8.18182V4.09091L8.18182 1.63636L1.63636 4.09091Z"
                        fill="#154EF2" />
                    <path
                        d="M8.18217 8.18173C9.31185 8.18173 10.2276 7.26595 10.2276 6.13627C10.2276 5.0066 9.31185 4.09082 8.18217 4.09082C7.0525 4.09082 6.13672 5.0066 6.13672 6.13627C6.13672 7.26595 7.0525 8.18173 8.18217 8.18173Z"
                        fill="#154EF2" />
                    <path
                        d="M4.0918 11.4545C4.49494 12.1895 5.08621 12.8042 5.80505 13.2355C6.52389 13.6668 7.34446 13.8993 8.18271 13.9091C9.02095 13.8993 9.84152 13.6668 10.5604 13.2355C11.2792 12.8042 11.8705 12.1895 12.2736 11.4545C12.2532 9.90327 9.53925 9 8.18271 9C6.8188 9 4.11225 9.90327 4.0918 11.4545Z"
                        fill="#154EF2" />
                </svg>
                <span class="f-toolbar-button-text">
                    Admin Panel
                </span>
            </a>
        </div>

        <div class="f-toolbar-center">
            @* Responsive buttons *@
        </div>

        <div class="f-toolbar-end">
            @if (ViewState.Site.HasAdminAccess || ViewState.Site.HasContributorAccess)
            {
                <button @onclick="OpenAddPage" class="f-toolbar-button f-toolbar-button-link">
                    <span>+ </span>
                    <span class="f-toolbar-button-text">New Page</span>
                </button>
            }

            <button @onclick="@OpenPageSettings" class="f-toolbar-button f-toolbar-button-link">
                <svg style="margin-top: 2px;" width="11" height="11" viewBox="0 0 11 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.34458 1.45C4.35698 1.32667 4.41479 1.21234 4.50678 1.12919C4.59877 1.04604 4.71839 0.999998 4.84243 1H5.73805C5.86209 0.999998 5.9817 1.04604 6.07369 1.12919C6.16568 1.21234 6.22349 1.32667 6.23589 1.45L6.2524 1.6165C6.64179 1.71247 7.01443 1.86671 7.35767 2.074L7.48726 1.968C7.58329 1.88954 7.70506 1.84952 7.82895 1.85571C7.95284 1.8619 8.07001 1.91386 8.15773 2.0015L8.79117 2.6345C8.87887 2.72216 8.93086 2.83925 8.93705 2.96305C8.94325 3.08685 8.9032 3.20854 8.82469 3.3045L8.71862 3.4345C8.92326 3.7725 9.07887 4.144 9.17643 4.5385L9.34255 4.555C9.46606 4.56728 9.58059 4.62499 9.6639 4.71693C9.74721 4.80887 9.79335 4.92847 9.79336 5.0525V5.9475C9.79336 6.07145 9.74729 6.19099 9.66409 6.28291C9.58088 6.37484 9.46647 6.4326 9.34305 6.445L9.17643 6.4615C9.08041 6.85062 8.92606 7.223 8.71862 7.566L8.82469 7.6955C8.9032 7.79146 8.94325 7.91315 8.93705 8.03695C8.93086 8.16075 8.87887 8.27784 8.79117 8.3655L8.15773 8.9985C8.07001 9.08614 7.95284 9.1381 7.82895 9.14429C7.70506 9.15048 7.58329 9.11046 7.48726 9.032L7.35717 8.926C7.0141 9.13328 6.64163 9.28753 6.2524 9.3835L6.23589 9.5495C6.22361 9.67292 6.16585 9.78737 6.07385 9.87063C5.98185 9.95388 5.86216 9.99999 5.73805 10H4.84243C4.71839 10 4.59877 9.95396 4.50678 9.87081C4.41479 9.78766 4.35698 9.67333 4.34458 9.55L4.32807 9.3835C3.93867 9.28755 3.56604 9.13331 3.2228 8.926L3.09321 9.032C2.99718 9.11046 2.87541 9.15048 2.75152 9.14429C2.62763 9.1381 2.51046 9.08614 2.42275 8.9985L1.78931 8.365C1.7016 8.27734 1.64961 8.16025 1.64342 8.03645C1.63722 7.91265 1.67727 7.79096 1.75578 7.695L1.86186 7.565C1.65447 7.22215 1.50012 6.84994 1.40404 6.461L1.23742 6.445C1.114 6.4326 0.999594 6.37484 0.916387 6.28291C0.83318 6.19099 0.787108 6.07145 0.787109 5.9475V5.0525C0.787108 4.92855 0.83318 4.80901 0.916387 4.71709C0.999594 4.62516 1.114 4.5674 1.23742 4.555L1.40404 4.5385C1.50007 4.14938 1.65442 3.77701 1.86186 3.434L1.75578 3.3045C1.67727 3.20854 1.63722 3.08685 1.64342 2.96305C1.64961 2.83925 1.7016 2.72216 1.78931 2.6345L2.42325 2.0015C2.51097 1.91386 2.62813 1.8619 2.75202 1.85571C2.87591 1.84952 2.99768 1.88954 3.09371 1.968L3.2238 2.074C3.56687 1.86672 3.93934 1.71247 4.32857 1.6165L4.34458 1.45Z"
                        stroke="currentColor" stroke-width="0.8" stroke-miterlimit="1" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path
                        d="M5.2901 4C6.11911 4 6.79115 4.67157 6.79115 5.5C6.79115 6.32843 6.11911 7 5.2901 7C4.4611 7 3.78906 6.32843 3.78906 5.5C3.78906 4.67157 4.4611 4 5.2901 4Z"
                        stroke="currentColor" stroke-width="0.8" stroke-miterlimit="1" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
                <span class="f-toolbar-button-text">Page Settings</span>
            </button>

            <div class="f-toolbar-toggle-buttons">
                <span class="f-toolbar-toggle-button f-toolbar-toggle-button-active">
                    <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.2877 6.6002C11.2877 7.23671 11.0347 7.84716 10.5843 8.29725C10.1339 8.74734 9.523 9.0002 8.88604 9.0002C8.24908 9.0002 7.63821 8.74734 7.18781 8.29725C6.73741 7.84716 6.48438 7.23671 6.48438 6.6002C6.48438 5.96368 6.73741 5.35323 7.18781 4.90314C7.63821 4.45305 8.24908 4.2002 8.88604 4.2002C9.523 4.2002 10.1339 4.45305 10.5843 4.90314C11.0347 5.35323 11.2877 5.96368 11.2877 6.6002Z"
                            stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M0.880859 6.6C2.16175 3.3224 5.15263 1 8.88642 1C12.6202 1 15.6111 3.3224 16.892 6.6C15.6111 9.8776 12.6202 12.2 8.88642 12.2C5.15263 12.2 2.16175 9.8776 0.880859 6.6Z"
                            stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span>
                <button @onclick="@OpenDesignMode" class="f-toolbar-toggle-button f-toolbar-toggle-button-disabled">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M15.7001 3.24175L12.7788 0.30041C12.5858 0.108008 12.3245 0 12.0522 0C11.7799 0 11.5187 0.108008 11.3256 0.30041L0.969226 10.6599L0.0236625 14.7479C-0.0089563 14.8973 -0.0078381 15.0522 0.0269353 15.2011C0.0617087 15.3501 0.129259 15.4894 0.224651 15.6088C0.320043 15.7283 0.440868 15.8249 0.578299 15.8915C0.715729 15.9582 0.866293 15.9933 1.01899 15.9942C1.09012 16.0019 1.16186 16.0019 1.23299 15.9942L5.35863 15.047L15.7001 4.69747C15.8922 4.50409 16 4.2424 16 3.96961C16 3.69682 15.8922 3.43513 15.7001 3.24175ZM4.86097 14.1497L0.99411 14.9623L1.87498 11.1634L9.62362 3.4312L12.6096 6.42239L4.86097 14.1497ZM13.2765 5.69952L10.2905 2.70832L12.0224 0.983399L14.9586 3.9746L13.2765 5.69952Z"
                            fill="currentColor" />
                    </svg>
                </button>
            </div>
            <SiteBuilderToolbarDropdown />
            <div class="f-toolbar-spacer"></div>
        </div>
    </div>
</div>

<PageSettingsModal @key="ViewState.Page" Open="@PageSettingsModalOpen" Id="@ViewState.Page.Id"
    OnCancel="ClosePageSettings" OnSubmit="PageSettingsSubmit" />
<PageSettingsModal Open="@AddPageModalOpen" Title="Add Page" OnCancel="CloseAddPage" OnSubmit="AddPageSubmit" />
